<template> 
<div style="padding: 20px">
  <el-radio-group v-model="radio1" size="mini">
          <el-radio-button label="中国" @click.native="chinaindustry"
            >中国</el-radio-button
          >
          <el-radio-button label="世界" @click.native="worldindustry"
            >世界</el-radio-button
          >
        </el-radio-group>
  <div id="pie" style="height:400px; width:100%" class="grid-content">
    
  </div>
</div>
  
</template>

<script>

import { request } from "../../components/network"
export default {
  data() {
    return {
      radio1: "中国",
    };
  },
  components: {  },
  mounted() {
    this.chinaindustry();
    
    
  },
  methods: {
        chinaindustry() {
      (this.victimindustry = "中国受害行业分布"),
        request({
          url: "/apt/chinaIndustryDistribution",
        }).then((res) => {
          this.industryspreaddata = res.data.data;
          this.pie = this.$echarts.init(document.getElementById("pie"));
          var option2 = {
            title: {
              text: this.victimindustry,
              left: "center",
              textStyle: {
                color: "#7AFEC6",
              },
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                name: "行业分布",
                type: "pie",
                radius: "50%",
                data: this.industryspreaddata,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          this.pie.setOption(option2);
        });
    },
    worldindustry() {
      (this.victimindustry = "世界受害行业分布"),
        request({
          url: "/apt/worldIndustryDistribution",
        }).then((res) => {
          this.industryspreaddata = res.data.data;
          this.pie = this.$echarts.init(document.getElementById("pie"));
          var option2 = {
            title: {
              text: this.victimindustry,
              left: "center",
              textStyle: {
                color: "#7AFEC6",
              },
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                name: "行业分布",
                type: "pie",
                radius: "50%",
                data: this.industryspreaddata,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          this.pie.setOption(option2);
        });
    },
    
  },

}
</script>

<style>

</style>